<!--
 * @Author: 闫晨辉 3089205282@qq.com
 * @Date: 2025-09-24 15:45:40
 * @LastEditors: 闫晨辉 3089205282@qq.com
 * @LastEditTime: 2025-09-26 11:29:48
 * @FilePath: \team-working\am-ui\src\views\dashboard\components\C223.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 提供图表容器 -->
    <div ref="C223" style="height: 220px;margin-top: 50px;"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
// 引入get请求  @表示src别名
import { get } from '@/utils/request';

export default {
  data() {
    return {
      tempData: []
    }
  },
  methods: {
    loadColumn() {
      const columnPlot = new Column(this.$refs.C223, {
        data: this.tempData,
        xField: 'type',
        yField: 'value',
        seriesField: 'type', // 部分图表使用 seriesField
        color: ['yellow','green','red', 'pink'],
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: 'blue',
            opacity: 1,
            fontSize: 12,
          },
        },
        xAxis: {
          label: {
            autoHide: false,
            autoRotate: false,
          },
        },
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
        interactions: [{ type: 'element-active' }],
      });

      columnPlot.render();
    },
    //封装一个请求获取设备数据
    async getEmpData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      // console.log(res,'222222');
      this.tempData = res.data;

    }
  },
  async mounted() {
    await this.getEmpData();
    this.loadColumn();
  }
}
</script>

<style lang="less" scoped></style>